import React, { useState } from 'react'
import { useStyles } from '@/hooks/styles'
import { Outlet } from 'react-router-dom'
import { SvgIcon } from '@/components/icons'
import { Logo } from '@/components/icons/Logo'
import { Layout, theme, Typography } from 'antd'
import { Menu } from '@/router'
import { motion } from 'framer-motion'
import { motionEasing } from '@/config'
import { Avatar } from '@/components/universal/Avatar/Avatar'
import styles from './Home.module.scss'

const { Content, Sider } = Layout

const Home = () => {
  const styleClass = useStyles(styles)
  const {
    token: { colorBgContainer },
  } = theme.useToken()

  const [siderCollapsed, setSiderCollapsed] = useState<boolean>(false)

  return (
    <Layout {...styleClass([], { width: '100vw', minHeight: '100vh' })}>
      <Content {...styleClass([], { width: '100%', height: '100%' })}>
        <Outlet />
      </Content>
    </Layout>
  )
}

export default Home
